<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-画可变位置的点</title>

</head>
<body>
    <canvas id="canvas" width = "400" height = "400"></canvas>
</body>
<script src="../lib/webgl-utils2.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
        attribute vec4 my_Position;
        void main() {
            gl_Position = my_Position;
            gl_PointSize = 10.0;
        }
    </script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
        precision mediump float;//指定精度声明 必不可少，否则报错
        uniform vec4 my_FragColor;
        void main() {
            gl_FragColor = my_FragColor;
        }
    </script>
</html>
<script>
    // Get A WebGL context 获取一个上下文
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");

    // setup a GLSL program 设置一个着色器描述语言 即设置顶点着色器，片元着色器
    var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
    gl.useProgram(program);

    //清理背景色
    gl.clearColor(0.0,0.0,0.0,1.0);

    //清理画布
    gl.clear(gl.COLOR_BUFFER_BIT);

    //给定一个顶点值
    //通过WebGL的渲染上下文变量gl，可以得到获取attribute变量的存储地址的方法getAttribLocation（）
    var my_Position = gl.getAttribLocation(program, "my_Position");
    // 将顶点位置传输给attribute变量my_Position
    // 顶点坐标赋值函数的命名规范 ：“基础函数名 + 参数个数 + 参数类型来命名的”
    gl.vertexAttrib4f(my_Position, 0.0, 0.8, 0.0,1.0);

    //给定一个颜色值
    // 通过WebGL的渲染上下文变量gl，可以得到获取uniform变量的存储地址的方法getUniformLocation（）
    var my_FragColor = gl.getUniformLocation(program, "my_FragColor");
    //将颜色值传递给uniform变量my_FragColor
    // uniform 变量赋值函数的命名规范：“基础函数名 + 参数个数 + 参数类型来命名的”
    gl.uniform4f(my_FragColor,0.0,1.0,1.0,1.0);
    //绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);

    //再绘制十个点 纵横坐标累乘以0.1
    for (var i=0;i<10;i++){
        gl.vertexAttrib4f(my_Position,i * 0.1,i * 0.1, 0.0 , 1.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }

    //再绘制十个点 纵横坐标取相反数后 乘以0.1
    for (var i=0;i<10;i++){
        gl.vertexAttrib4f(my_Position,-i * 0.1,-i * 0.1, 0.0 , 1.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }

    //再绘制十个点 横坐标取相反数后乘以0.1，纵坐标乘以0.1
    for (var i=0;i<10;i++){
        gl.vertexAttrib4f(my_Position,-i * 0.1, i * 0.1, 0.0 , 1.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }

    //再绘制十个点 纵坐标取相反数后乘以0.1，横坐标乘以0.1
    for (var i=0;i<10;i++){
        gl.vertexAttrib4f(my_Position, i * 0.1, -i * 0.1, 0.0 , 1.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }

    //结论：在操作的图形区域内，以中心为轴，向下或者向左则是减，向右或向上则是加
</script>

